<template>
    <Header />

    <div class="course-detail-container">
        <!-- 加载中 -->
        <div v-if="loading" class="loading">加载课程信息中，请稍候...</div>

        <!-- 加载失败 -->
        <div v-else-if="!courseInfo" class="error">
            课程信息加载失败，请 <a href="#" @click.prevent="loadCourseInfo">点击重试</a>。
        </div>

        <!-- 课程头信息 -->
        <div v-else class="course-header">
            <div class="cover-wrapper">
                <img :src="coverImageUrl" alt="课程封面" class="cover" />
            </div>
            <div class="basic-info">
                <h2>{{ courseInfo.name }}</h2>
                <p>分类：{{ courseInfo.category }}</p>
                <p v-if="courseInfo.isFree">免费课程</p>
                <p v-else>价格：{{ courseInfo.cost }} 元</p>
                <p>观看人数：{{ courseInfo.count }} 人</p>
            </div>
        </div>

        <!-- 课程描述 -->
        <div v-if="courseInfo && !loading" class="course-desc">
            <h2>课程描述</h2>
            <p>{{ courseInfo.desc }}</p>
        </div>

        <!-- 章节与视频列表 -->
        <div v-if="courseInfo && !loading" class="chapters">
            <h3>课程目录</h3>
            <ul class="chapter-list">
                <li v-for="(chapter, index) in courseInfo.courseChapters" :key="chapter.id" class="chapter-item">
                    <div class="chapter-header" @click="toggleChapter(index)">
                        <span class="arrow">{{ openChapterIndex === index ? '▼' : '▶' }}</span>
                        <strong>第 {{ chapter.sort }} 章：{{ chapter.title }}</strong>
                    </div>
                    <div v-show="openChapterIndex === index" class="chapter-content">
                        <p v-if="chapter.desc">{{ chapter.desc }}</p>
                        <ul class="video-list">
                            <li v-for="video in chapter.courseVideos" :key="video.id" class="video-item">
                                <a @click.prevent="playVideo(video.videoUrl)">
                                    {{ video.title }}
                                </a>
                                <span v-if="video.isFree === 1">(免费)</span>
                                <span v-else>(付费)</span>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <Footer />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { getCourseDetail } from '@/api/course'
import { loadImage } from '@/api/file'

const route = useRoute()
const router = useRouter()

// 响应式数据
const courseId = ref(route.params.courseId)
const courseInfo = ref(null)
const coverImageUrl = ref('/default.png')
const loading = ref(true)
const openChapterIndex = ref(null) // 控制当前展开的章节索引

// 视频播放跳转
const playVideo = (videoUrl) => {
    router.push(`/course/play/${encodeURIComponent(videoUrl)}`)
}

// 切换章节展开状态
const toggleChapter = (index) => {
    openChapterIndex.value = openChapterIndex.value === index ? null : index
}

// 加载封面图
const loadCoverImage = async () => {
    if (courseInfo.value?.coverUrl) {
        try {
            const url = await loadImage(courseInfo.value.coverUrl, '/default.png')
            coverImageUrl.value = url
        } catch (error) {
            console.error('封面图加载失败', error)
            coverImageUrl.value = '/default.png'
        }
    }
}

// 加载课程详情
const loadCourseInfo = async () => {
    loading.value = true
    try {
        const res = await getCourseDetail(courseId.value)
        courseInfo.value = res.data || {
            name: '',
            desc: '',
            category: '',
            coverUrl: '',
            isFree: false,
            cost: 0,
            count: 0,
            courseChapters: []
        }
        await loadCoverImage()
    } catch (err) {
        console.error('加载课程详情失败:', err)
        courseInfo.value = null
        coverImageUrl.value = '/default.png'
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    loadCourseInfo()
})
</script>

<style lang="scss" scoped>
.course-detail-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 100vh;

    @media (max-width: 768px) {
        padding: 15px;
    }
}

/* 响应式课程头信息 */
.course-header {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 25px;

    @media (max-width: 768px) {
        gap: 15px;
        flex-direction: column;
    }

    .cover-wrapper {
        flex: 0 0 280px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        img.cover {
            width: 100%;
            border-radius: 12px;
            object-fit: cover;
            aspect-ratio: 16/9;
        }
    }

    .basic-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;

        h2 {
            font-size: 28px;
            margin-bottom: 12px;
            color: #1a1a1a;

            @media (max-width: 576px) {
                font-size: 22px;
            }
        }

        p {
            color: #555;
            font-size: 15px;
            margin: 6px 0;
            display: flex;
            align-items: center;

            &:before {
                content: '•';
                margin-right: 8px;
                color: #007BFF;
            }
        }
    }
}

/* 增强课程描述样式 */
.course-desc {
    margin: 25px 0;
    padding: 20px;
    background-color: #f5f9ff;
    border-left: 5px solid #007BFF;
    border-radius: 6px;
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    h2 {
        color: #007BFF;
        margin-bottom: 12px;
        font-size: 20px;
    }
}

/* 优化章节列表 */
.chapters {
    h3 {
        font-size: 22px;
        margin-bottom: 20px;
        color: #2c3e50;
        border-left: 3px solid #007BFF;
        padding-left: 10px;
    }

    .chapter-list {
        list-style: none;
        padding-left: 0;

        .chapter-item {
            background-color: #ffffff;
            padding: 18px;
            border-radius: 10px;
            margin-bottom: 18px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            }

            .chapter-header {
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 12px;
                font-weight: 600;
                font-size: 17px;
                color: #333;
                padding: 6px 0;

                .arrow {
                    transition: transform 0.3s ease;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background-color: #e9ecef;
                }
            }

            .chapter-content {
                margin-top: 12px;
                padding-left: 32px;
                animation: slideDown 0.3s ease forwards;

                p {
                    font-size: 15px;
                    color: #666;
                    margin-bottom: 12px;
                }

                .video-list {
                    list-style: none;
                    padding-left: 0;

                    .video-item {
                        margin: 10px 0;
                        display: flex;
                        align-items: center;
                        gap: 10px;

                        a {
                            color: #007BFF;
                            cursor: pointer;
                            text-decoration: none;
                            transition: color 0.2s ease;

                            &:hover {
                                color: #0056b3;
                            }
                        }

                        span {
                            padding: 2px 6px;
                            font-size: 12px;
                            border-radius: 4px;
                            font-weight: 500;

                            &.free {
                                background-color: #d4edda;
                                color: #155724;
                            }

                            &.paid {
                                background-color: #f8d7da;
                                color: #721c24;
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 动画效果 */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 加载状态样式优化 */
.loading,
.error {
    text-align: center;
    padding: 80px 20px;
    font-size: 18px;
    color: #888;
    background-color: #f8f9fa;
    border-radius: 10px;
    margin: 40px auto;
    max-width: 600px;

    a {
        color: #007BFF;
        text-decoration: none;
        font-weight: 500;

        &:hover {
            text-decoration: underline;
        }
    }
}
</style>